<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>大学生 信息管理</title>
        <meta content="webkit" name="renderer">
        <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
        <link rel="stylesheet" th:href="@{/layui/css/font.css}">
        <link rel="stylesheet" th:href="@{/layui/css/xadmin.css}">
        <script charset="utf-8" th:src="@{/layui/lib/layui/layui.js}"></script>
        <script th:src="@{/layui/js/xadmin.js}" type="text/javascript"></script>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <div class="layui-col-space5 layui-form">
                                <div class="layui-input-inline layui-show-xs-block">
                                    <label>
                                        <input autocomplete="off" class="layui-input" id="studentName"
                                               name="studentName" placeholder="请输入姓名" type="text">
                                    </label>
                                </div>
                                <div class="layui-input-inline">
                                    <label>
                                        <select id="universityName" name="university.id">
                                            <option value="请选择">请选择大学名称</option>
                                        </select>
                                    </label>
                                </div>
                                <div class="layui-input-inline">
                                    <label>
                                        <select id="majorName" name="major.id">
                                            <option value="请选择">请选择主修专业名称</option>
                                        </select>
                                    </label>
                                </div>
                                <div class="layui-input-inline">
                                    <label>
                                        <select id="cityName" name="city.id">
                                            <option value="请选择">请选择所在地区</option>
                                        </select>
                                    </label>
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <button class="layui-btn icon-btn" id="reset">
                                        <i class="layui-icon">&#xe669;</i>
                                    </button>
                                    <button class="layui-btn" data-type="reload">
                                        <i class="layui-icon">&#xe615;</i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card-header">
                            <button class="layui-btn layui-btn-danger" id="delAll">
                                <i class="layui-icon"></i>批量删除
                            </button>
                            <button class="layui-btn"
                                    onclick="xadmin.open('添加学生账户信息','/admin_user_student_message_addView',null,null, false)">
                                <i class="layui-icon"></i>添加
                            </button>
                        </div>
                        <div class="layui-card-body ">
                            <table class="layui-table layui-form" id="studentMessage"
                                   lay-filter="table">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            layui.use([ 'form', 'layer', 'table' ], function() {
                const table = layui.table, form = layui.form, $ = layui.$;
                //执行一个laydate实例
                table.render({
                    elem : '#studentMessage', //指定元素
                    url : '/admin_user_student_message_list',
                    // toolbar: '#toolbarDemo',
                    id : 'list',
                    page : {
                        layout : [ 'limit', 'count', 'prev', 'page', 'next', 'skip' ],
                        groups : 1,
                        first : false,
                        last : false
                    },
                    cols : [ [ //表头
                        {type : 'checkbox'},
                        {field : 'portrait', title : '头像', minWidth : 100, align: "center",
                            templet:'#img'},
                        {field : 'studentName', title : '姓名', minWidth : 100, align: "center", sort : true},
                        {field : 'gender', title : '性别', minWidth : 80, align: "center", sort : true},
                        {field : 'politics', title : '政治面貌', minWidth : 120, align: "center", sort : true,
                            templet : '<div>{{d.politics.politicsType}}</div>'},
                        {field : 'university', title : '就读大学', minWidth : 150, align: "center", sort : true,
                            templet:'<div>{{d.university.universityName}}</div>'},
                        {field : 'major', title : '主修专业', minWidth : 180, align:"center", sort : true,
                            templet:'<div>{{d.major.majorName}}</div>'},
                        {field : 'bornDate', title : '出生日期', minWidth : 180, align:"center", sort : true},
                        {field : 'graduateDate', title : '毕业年月', minWidth : 120, align:"center", sort : true},
                        {field : 'email', title : '邮箱地址', minWidth : 180, align:"center"},
                        {field : 'phone', title : '联系方式', minWidth : 150, align:"center", sort : true},
                        {field : 'password', title : '登录密码', minWidth : 120, align:"center", sort : true},
                        {field : 'city', title : '所在地区', minWidth : 150, align:"center", sort : true,
                            templet:'<div>{{d.city.cityName}}</div>'},
                        {field : 'company', title : '兼职公司', minWidth : 150, align:"center", sort : true,
                            templet:'<div>{{d.company.companyName}}</div>'},
                        {fixed : 'right', title : '操作', toolbar : '#barDemo', align:"center", minWidth : 200}
                    ] ]
                });
                // 查询信息
                const active = {
                    reload: function(){
                        const studentName = $('#studentName');
                        //外键为各自id
                        const universityName = $('#universityName');
                        const majorName = $('#majorName');
                        const cityName = $('#cityName');
                        //执行重载
                        table.reload('list', {
                            page: {
                                //重新从第 1 页开始
                                curr: 1
                            }
                            ,where: {
                                studentName: studentName.val(),
                                universityName: universityName.val(),
                                majorName: majorName.val(),
                                cityName: cityName.val()
                            }
                        }, 'data');

                    }
                };
                $('.layui-card-body .layui-btn').on('click', function(){
                    const type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
                //重置按钮
                $("#reset").on("click",function () {
                    location.reload();
                });
                // 获取下拉框信息 (大学信息)
                $.get("/university_option_message",{},function (data) {
                    let list = data;
                    const select = document.getElementById('universityName');
                    if (list != null) {
                        for (let c in list) {
                            let option = document.createElement("option");
                            option.setAttribute("value", list[c].id);
                            option.innerText = list[c].universityName;
                            select.appendChild(option)
                        }
                    }
                    form.render('select');
                },"json");
                // 获取下拉框信息 (专业信息)
                $.get("/major_option_message",{},function (data) {
                    let list = data;
                    const select = document.getElementById('majorName');
                    if (list != null) {
                        for (let c in list) {
                            let option = document.createElement("option");
                            option.setAttribute("value", list[c].id);
                            option.innerText = list[c].majorName;
                            select.appendChild(option)
                        }
                    }
                    form.render('select');
                },"json");
                // 获取下拉框信息 (市级信息)
                $.get("/city_option_message",{},function (data) {
                    let list = data;
                    const select = document.getElementById('cityName');
                    if (list != null) {
                        for (let c in list) {
                            let option = document.createElement("option");
                            option.setAttribute("value", list[c].id);
                            option.innerText = list[c].cityName;
                            select.appendChild(option)
                        }
                    }
                    form.render('select');
                },"json");
                //监听行工具事件
                table.on('tool(table)', function(obj){
                    switch (obj.event) {
                        case 'resume':
                            xadmin.open('查看学生的简历信息','/admin_user_student_resume_message?id='+obj.data.id,null,null,false)
                            break;
                        case 'edit':
                            xadmin.open('修改学生账户信息','/admin_user_student_message_editView?id='+obj.data.id,null,null,false)
                            break;
                        case 'del':
                            layer.confirm('真的删除该数据吗?', function(index){
                                $.ajax({
                                    url: '/admin_user_student_message_delete?id='+obj.data.id,
                                    type: 'post',
                                    success: function (res) {
                                        if (res.code === 0) {
                                            //弹出提示，并在1秒后进行跳转
                                            layer.alert("删除成功", {
                                                icon : 6
                                            }, function() {
                                                obj.del();
                                                layer.close(index);
                                                location.reload();
                                                return false;
                                            });
                                        } else {
                                            layer.msg("删除失败:" + res.msg);
                                            return false;
                                        }
                                    }
                                })
                            });
                            break;
                    }
                });
                //批量删除
                $("#delAll").on('click',function(){
                    //获取选中状态
                    let checkStatus = table.checkStatus('list');
                    //获取选中数量
                    let selectCount = checkStatus.data.length;
                    if(selectCount === 0){
                        layer.msg('批量删除至少选中一项数据',function(){});
                        return false;
                    }
                    layer.confirm('真的要删除选中的项吗？',function(index){
                        layer.close(index);
                        index = layer.load(1, {shade: [0.1,'#fff']});

                        let str="";
                        for(let i = 0; i < selectCount; i ++){
                            str = str + "," + checkStatus.data[i].id;
                        }
                        $.ajax({
                            type:'post',
                            data:{"arrayId": str},
                            url:'/admin_user_student_message_delete_select',
                            success:function(res){
                                if(res.code === 0){
                                    //弹出提示，并在1秒后进行跳转
                                    layer.alert("删除成功", {
                                        icon : 6
                                    }, function() {
                                        layer.close(index);
                                        location.reload();
                                        return false;
                                    });
                                } else {
                                    layer.msg("删除失败:" + res.msg);
                                    return false;
                                }
                            }
                        });
                    })
                });
            });
        </script>
        <script id="img" type="text/html">
            <img src="{{d.portrait}}" alt="这是头像" height="24px" width="24px" onclick="bigPicture(this)">
        </script>
        <script>
            function bigPicture(e) {
                let Width = e.width;
                let Height = e.height;
                let scaleWH = Width / Height;
                let bigH = 400;
                let bigW = scaleWH * bigH;
                if (bigW > 1000) {
                    bigW = 1000;
                    bigH = bigW / scaleWH;
                } // 放大预览图片
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 1,
                    shadeClose: true, //点击阴影关闭
                    area: [bigW + 'px', bigH + 'px'], //宽高
                    content: "<img width='100%' height='100%' alt='放大的头像' src=" + $(e).attr('src') + " />"
                });
            }
        </script>
        <script id="barDemo" type="text/html">
            <a class="layui-btn layui-btn-xs" lay-event="resume">查看简历</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </body>
</html>